<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter()

const props = defineProps({
  content: {
    type: Object,
    default: () => {
      return null
    }
  },
})

//跳转详情页
const toDetailView = () => {
  router.push({
    name: 'detailView',
    params: {
      id: props.content.articleId,
    }
  })
}
</script>

<template>

  <div class="flex flex-col bg-white shadow-md shadow-gray-300 px-8 py-10 mb-4 ">
    <div class="center text-3xl text-gray-700">
      {{ content.title }}
    </div>
    <div class="center py-2 opacity-80 font-light text-gray-500">
      发表于： {{ content.createTime }} &nbsp; 分类于： {{ content.categoryName }}
      &nbsp; 浏览： {{ content.views }} &nbsp; 标签：
      <div
        v-for="(item, index) in content.tagList"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="center flex-col text-xl pt-5 text-gray-600  leading-9">
      <div class="">
        {{ content.simple }}
      </div>
    </div>
    <div
      class="center font-normal pt-10"
      @click="toDetailView()"
    >
      <div class="flex border-2 group px-5 py-1 border-gray-700 hover:bg-black after:text-black after:bg-white
       hover:text-white  duration-200 cursor-pointer ease-in-out">
        阅读全文 <div class="group-hover:animate-pulse ">»</div>
      </div>
    </div>
  </div>


</template>

<style
  scoped
  lang='scss'
></style>